<template>
	<view>
		<!-- 商品列表 -->
		<!-- <goods-list :goods='goods' @goodsItemClick='goGoodsDetail'></goods-list> -->
		<goods-list :goods='goods' @goodsItemCLick='goGoodsDetail'></goods-list>
		
		<!-- 结束线 -->
		<view class='isOver' v-if='flag'>------ 没有更多啦~ -------</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				flag: false,
				page: 0,
				goods: [
					// {goods_name: "商品1"},
					// {goods_name: "商品2"},
				]
			}
		},
		components: {'goods-list': goodsList},
		methods: {
			async getGoodsList () {
				var page = this.page + 1 // 新一页的数据
				
				console.log('当前页码: ', this.page, '请求页码: ', page)
				const res = await this.$myRequest({
					url: '/api/store/goods?page=' + page
				})
				if(res.data.length == 0){
					console.log('-------- 没有数据啦, 已经是最后一页了!')
					uni.showToast({
						title: '到底啦!',
						icon: 'none',
					})
					this.flag = true
					return 0		// 最后一页了
				}
				var new_data = this.add_hostname_before_keyname(res.data, 'image')
				
				var old_data = this.goods[this.goods.length-1]
				if(typeof(old_data) == "undefined"){
					this.goods = new_data
					
					this.page += 1
					return 1 		// 第一页数据
				}
				
				this.goods = [...this.goods, ...new_data]
				this.page += 1
				return 1	// 新增加了一页数据
			},
			// 导航到商品详情页
			goGoodsDetail(id) {
				uni.navigateTo({
					url: "/pages/goods-detail/goods-detail?id=" + id
				})
			},
			
			async f1(){
				const res = await this.getGoodsList()
				uni.stopPullDownRefresh()
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		onReachBottom(){
			this.getGoodsList()
		},
		onPullDownRefresh() {
			console.log('下拉刷新了111')
			this.page = 1
			this.goods = []
			this.flag = false
			setTimeout(()=>this.f1(), 500)
		}
		
	}
</script>

<style lang="scss">
	.goods_list {
		background: #EEEEEE;;
	}
	.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #EEEEEE;
		font-size: 28rpx;
	}
</style>
